<header class="g-header" data-theme="{{ site.theme-color }}">
    <div class="g-logo">
      <a href="{{ "/" | relative_url }}" aria-label="logo"></a>
    </div>
    <div class="menu-tools">
        {% if site.search and site.search_type == "docsearch" %}
            <div id="search-toggle"></div>
        {% endif %}
        <div id="random-toggle">
            <a href="#" aria-label="Random Article" target="_blank">🎲</a>
        </div>
        {% if site.badges.travelling %}
        <div id="travelling-toggle">
            <a href="https://www.travellings.cn/go.html" aria-label="Travelings" target="_blank">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-train-subway"></use>
                </svg>
            </a>
        </div>
        {% endif %}
        <div id="mode-toggle">
            <svg class="icon icon-day" aria-hidden="true">
                <use xlink:href="#icon-day"></use>
            </svg>
            <svg class="icon icon-night" aria-hidden="true">
                <use xlink:href="#icon-night"></use>
            </svg>
        </div>
        <svg id="menu-toggle" class="icon-menu" aria-hidden="true">
            <use xlink:href="#icon-menu"></use>
        </svg>
    </div>
    <nav class="g-nav">
        <ul>
            {% for i in site.nav %}
                {% if i[1].first %}
                <li class="dropdown">
                    <a class="dropdown-toggle" href="javascript:void(0);"> {{ i[0] }} </a>
                    <ul class="dropdown-menu">
                    {% for j in i[1] %}
                        <li>
                            <a href="{{ j[1] | relative_url}}" aria-label="{{ j[0] }}">
                                {{ j[0] }}
                            </a>
                        </li>
                    {% endfor %}
                    </ul> 
                </li>
                {% else %}
                <li>
                    <a href="{{ i[1] | relative_url}}" aria-label="{{ i[0] }}">
                        {{ i[0] }}
                    </a>
                </li>
                {% endif %}
            {% endfor %}
            <li class="random">
                <a href="#" aria-label="Random Article" target="_blank">🎲</a>
            </li>
            {% if site.badges.travelling %}
            <li class="travelling">
                <a href="https://www.travellings.cn/go.html" aria-label="Travelings" target="_blank">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-train-subway"></use>
                    </svg>
                </a>
            </li>
            {% endif %}
            <li class="mode">
                <svg class="icon day" aria-hidden="true">
                    <use xlink:href="#icon-day"></use>
                </svg>
                <svg class="icon night" aria-hidden="true">
                    <use xlink:href="#icon-night"></use>
                </svg>
            </li>
            {% if site.search and site.search_type == "docsearch" %}
            <li id="search"></li>
            {% endif %}
        </ul>
    </nav>
</header>
